<template>
	<view class="container">
		<!-- 搜索区域 -->
		<view class="search-box">
			<uni-easyinput 
				v-model="searchParams.customerName" 
				placeholder="请输入客户姓名搜索"
				class="search-input" 
			/>
			
			<uni-data-select
				v-model="searchParams.status"
				:localdata="payStatusOptions"
				placeholder="支付状态"
				class="status-select"
			/>
			
			<button type="primary" size="mini" @click="search">查询</button>
		</view>

		<!-- 账单列表 -->
		<scroll-view 
			scroll-y="true" 
			class="bill-list"
			@scrolltolower="loadMore"
			:style="{height: scrollHeight + 'px'}"
		>
			<view 
				v-for="(item, index) in billList" 
				:key="index"
				class="bill-card"
				:class="{'paid': item.status === '1', 'unpaid': item.status === '0'}"
			>
				<view class="card-header">
					<text class="name">{{ item.customerName }}</text>
					<text :class="['status-tag', item.status === '1' ? 'status-paid' : 'status-unpaid']">
						{{ item.status === '1' ? '已支付' : '未支付' }}
					</text>
				</view>
				
				<view class="card-content">
					<view class="info-item">
						<uni-icons type="calendar" size="16"></uni-icons>
						<text class="label">账单日期：</text>
						<text class="value">{{ item.billDate }}</text>
					</view>
					
					<view class="info-item">
						<uni-icons type="wallet" size="16"></uni-icons>
						<text class="label">金额：</text>
						<text class="value">¥{{ item.amount }}</text>
					</view>
					
					<view class="info-item" v-if="item.remarks">
						<uni-icons type="chat" size="16"></uni-icons>
						<text class="label">备注：</text>
						<text class="value">{{ item.remarks }}</text>
					</view>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view class="loading-more">
				<uni-load-more :status="loadMoreStatus" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getBillList } from '@/api/manage/bill'

export default {
	data() {
		return {
			
			scrollHeight: 0,
			// 查询参数
			searchParams: {
				customerName: '',
				status: '',
				pageNum: 1,
				pageSize: 10
			},
			// 状态选项
			payStatusOptions: [{
				text: '全部',
				value: ''
			}, {
				text: '已支付',
				value: '1'
			}, {
				text: '未支付',
				value: '0'
			}],
			// 账单列表模拟数据
			billList: [],
			// 加载状态
			loadMoreStatus: 'more', // more-加载前 loading-加载中 noMore-没有更多数据
			hasMore: true // 是否还有更多数据
		}
	},
	mounted() {
		// 计算scroll-view高度
		const systemInfo = uni.getSystemInfoSync()
		// 减去搜索框高度和状态栏高度
		this.scrollHeight = systemInfo.windowHeight - 120 
		
		this.loadData()
	},
	methods: {
		// 加载数据
		loadData(isLoadMore = false) {
			if (!isLoadMore) {
				this.billList = [] // 搜索时清空列表
				this.searchParams.pageNum = 1
				this.hasMore = true
			}
			
			if (!this.hasMore) {
				return
			}
			
			this.loadMoreStatus = 'loading'
			
			// 模拟API调用
			setTimeout(() => {
				// 生成模拟数据
				const newData = Array.from({length: 10}, (_, index) => ({
					customerName: `客户${this.billList.length + index + 1}`,
					billDate: '2024-01-' + String(Math.floor(Math.random() * 30) + 1).padStart(2, '0'),
					amount: (Math.random() * 10000).toFixed(2),
					status: Math.random() > 0.5 ? '1' : '0',
					remarks: `测试账单${this.billList.length + index + 1}`
				}))
				
				// 模拟最多加载30条数据
				if (this.billList.length >= 30) {
					this.hasMore = false
					this.loadMoreStatus = 'noMore'
					return
				}
				
				if (isLoadMore) {
					this.billList = [...this.billList, ...newData]
					this.searchParams.pageNum++
				} else {
					this.billList = newData
				}
				
				this.loadMoreStatus = this.hasMore ? 'more' : 'noMore'
			}, 500)
		},
		// 搜索
		search() {
			this.loadData()
		},
		// 加载更多
		loadMore() {
			if (this.loadMoreStatus === 'loading' || !this.hasMore) return
			this.loadData(true)
		}
	}
}
</script>

<style lang="scss">
.container {
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.search-box {
	padding: 20rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	gap: 20rpx;
	position: sticky;
	top: 0;
	z-index: 1;
	
	.search-input {
		flex: 1;
	}
	
	.status-select {
		width: 200rpx;
	}
}

.bill-list {
	flex: 1;
	padding: 20rpx;
	box-sizing: border-box;
	
	.bill-card {
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		&.paid {
			background-color: #f0f9eb;
			border-left: 8rpx solid #67c23a;
		}
		
		&.unpaid {
			background-color: #fef0f0;
			border-left: 8rpx solid #f56c6c;
		}
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #303133;
			}
			
			.status-tag {
				padding: 4rpx 16rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				
				&.status-paid {
					background-color: #67c23a;
					color: #fff;
				}
				
				&.status-unpaid {
					background-color: #f56c6c;
					color: #fff;
				}
			}
		}
		
		.card-content {
			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				
				.uni-icons {
					margin-right: 10rpx;
					color: #909399;
				}
				
				.label {
					color: #909399;
					margin-right: 10rpx;
				}
				
				.value {
					color: #303133;
				}
			}
		}
	}
}

.loading-more {
	padding: 20rpx 0;
	text-align: center;
}
</style>
